<template>
  <div class="hello">
    <el-button :plain="true" @click="open">Show message</el-button>
    <el-button :plain="true" @click="openVn">VNode</el-button>
  </div>

</template>

<script lang="ts" setup>
import { h, ref } from 'vue'
import { ElLoading, ElLoadingDirective } from '@/components/loading'
import { ElButton } from '@/components/button'
import { ElBacktop } from '@/components/backtop'
import { StarFilled } from '@element-plus/icons-vue'
import { ElDivider } from '@/components/divider'
import { ElScrollbar } from '@/components/scrollbar'
import {ElDialog } from '@/components/dialog'




</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.hello {
  height: 500px;
}

h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.loading {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
p{
  line-height: 50px;
}
</style>
